<template>
  <section class="todoapp">
      <mvc-top @content="add"></mvc-top>
      <!-- 因为todaoList是一个引用类型（复杂类型） -->
      <!-- 所以在传递的时候，传递是一个引用地址 -->
      <mvc-list :todo-arr="todoList" @complete="toggle" @del="del"></mvc-list>
      <mvc-btm @click="clear" @screening="screening" :total="sum"></mvc-btm>
      </section>  
</template>

<script>
import MvcTop from "./top.vue";
import MvcList from "./list.vue";
import MvcBtm from "./btm.vue";
export default {
    
    name:"Home",
    //
    components:{MvcTop,MvcList,MvcBtm},

    data() {
        return {
           allList:[
            //    {id:1,title:"写简历",completed:true},
            //    {id:2,title:"打疫苗",completed:false},
            //    {id:3,title:"吃饭",completed:true},
            //    {id:4,title:"睡觉",completed:false},
           ],
           todoList:[],
        }
    },
    created(){
        this.allList = JSON.parse(localStorage.getItem("allList")) || [];
        this.todoList = this.allList;
    },
    methods:{
        toggle(item){
            item.completed = !item.completed;
            localStorage.setItem("allList",JSON.stringify(this.allList));
        },
        add(val){
            this.todoList.push({
                id:this.todoList.lenght+1,
                title:val,
                completed:false
            });
            localStorage.setItem("allList",JSON.stringify(this.allList));
        },
        del(index){
            this.todoList.splice(index,1);
            localStorage.setItem("allList",JSON.stringify(this.allList));
        },
        clear(){
            this.todoList = this.allList.filter(item=>item.completed==false);
            this.allList = this.todoList;
            localStorage.setItem("allList",JSON.stringify(this.allList));
        },
        screening(index){
            if(index==0){
                this.todoList = this.allList;
            }
            if(index==1){
                this.todoList = this.allList.filter(item=>item.completed==false);
            }
            if(index==2){
                this.todoList = this.allList.filter(item=>item.completed==true);
            }
        },
       
    }, computed:{
            sum(){
                return this.todoList.length;
            }
        }
}
</script>